<template>
  <!-- 内容区域 -->
  <section class="category-wrap" ref="categoryWrap">
    <!-- 左侧分类导航 -->
    <div class="nav-side-wrapper " ref="sidewrapper">
      <ul class="nav-side">
        <li v-for="(item, index) in datar" :key="index" :class="{'active' :currentIndex === index }" @click="selectMenu(index)">
          {{ item.name }}
        </li>
      </ul>
    </div>

    <div class="category-right" ref="sidewrapperight">
      <div v-for="(item, index) in categoryList" :key="index">
        <img class="catgory-img" :src="item.mainImgUrl" alt="" />
        <div v-for="(list, index) in item.list" :key="index">
          <p>{{ list.title }}</p>
          <div class="category-list">
            <div
              class="produst-list"
              v-for="(productList, index) in list.productList"
              :key="index"
            >
              <img class="produst-img" :src="productList.imgUrl" alt="" />
              <p class="produst-title">{{ productList.title }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Tabbar></Tabbar>
  </section>
</template>

<script>
import Bscroll from "better-scroll";
import { getdata } from "../api";
import Tabbar from "@/components/tabbar"


export default {
  data() {
    return {
      datar: [],
      currentIndex:0,
    };
  },

    components:{
        Tabbar
    },
  created() {
    getdata((res) => {
      this.datar = res.data;
      this.$nextTick(() => {
        new Bscroll(this.$refs.sidewrapper, {
          probeType: 3,
          observeDOM: true,
          click: true,
        });
        new Bscroll(this.$refs.sidewrapperight, {
          probeType: 3,
          observeDOM: true,
          click: true,
        });
      });
    });
  },
  mounted() {
    this.setSearchWrapHeight();
  },
  computed:{
      categoryList() {
        return this.datar.filter((v, i) => this.currentIndex == i)
        }
  },
  methods: {
    setSearchWrapHeight() {
      let $screenHeight = document.documentElement.clientHeight;
      this.$refs.categoryWrap.style.height = $screenHeight - 110 + "px";
    },
   selectMenu(index){
       this.currentIndex = index
   }
  },
};
</script>

<style lang="scss" scoped>
@import "../common/style/mixin.scss";
.category-wrap {
  // @include fj;
  width: 100%;
  margin-top: 60px;
  background: white;
  border-top: 1px solid rgb(212, 210, 210);
  display: flex;

  .nav-side-wrapper {
    width: 28%;
    height: 100%;
    overflow: hidden;
    background-color: #f8f8f8;

    .nav-side {
      width: 100%;
      // @include boxSizing;
      background: #f8f8f8;

      li {
        width: 100%;
        height: 46px;
        text-align: center;
        line-height: 46px;
        font-size: 15px;

        
      }
    }
  }
 .active {
          color: red;
          background: #fff;
        }
  // 右
  .category-right {
    width: 72%;
    // float: right;
    .catgory-img {
      width: 100%;
    }
    .category-list {
      display: flex;
      flex-wrap: wrap;
      .produst-list {
        width: 33.3333%;
        .produst-img {
          width: 100%;
        }
        .produst-title {
          width: 100%;
          text-align: center;
          padding: 0;
          margin: 0;
        }
      }
    }
  }
}
</style>
